<template>
  <div>
    <h1 style="color: #ff5833; font-size: 72px;">欢迎来到惊喜一餐</h1>
    <p style="color: #ff8f33; font-size: 28px;">探索您的美食之旅，发现高评分餐厅</p>
    <p class="description">在这里，您可以找到各种美味佳肴，享受独特的餐饮体验。无论是家庭聚餐、朋友聚会还是商务宴请，我们都能为您提供最佳选择。</p>

    <!-- 推荐餐厅列表 -->
    <el-row :gutter="20">
      <el-col :span="8" v-for="restaurant in recommendedRestaurants" :key="restaurant.id">
        <el-card :body-style="{ padding: '0px' }">
          <img :src="`/images/${restaurant.image}`" class="image" />
          <div style="padding: 14px;">
            <span>{{ restaurant.name }}</span>
            <div class="bottom">
              <time class="time">{{ restaurant.address }}</time>
              <el-button type="text" class="button" @click="goToRestaurantDetails(restaurant.id)">查看详情</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recommendedRestaurants: [
        { id: 1, name: '餐厅A', address: '地址A', image: '1.jpg' },
        { id: 2, name: '餐厅B', address: '地址B', image: '2.jpg' },
        { id: 3, name: '餐厅C', address: '地址C', image: '3.jpg' }
      ]
    };
  },
  methods: {
    goToRestaurantDetails(id) {
      this.$router.push(`/restaurant/${id}`);
    }
  }
};
</script>

<style scoped>
h1 {
  font-size: 2.5em;
  color: #333;
  text-align: center;
  margin-bottom: 10px;
}

p {
  font-size: 1.2em;
  color: #666;
  text-align: center;
  margin-bottom: 10px;
}

.description {
  font-size: 1em;
  color: #777;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 30px;
  line-height: 1.6;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  display: block;
}
</style>